<template>
    <div v-if="userData === null">
        <template v-if="!loadingFailed">
            <NoData>
                快去登录&nbsp;查看更多信息吧~
            </NoData>
        </template>
        <template v-if="loadingFailed">
            <NoData>
                加载失败&nbsp;请稍后重试
            </NoData>
        </template>
    </div>
    <div v-else class="work-show" v-loading="loading" element-loading-text="Loading..."
        element-loading-background="rgb(255,255,255,0.95)">
        <div class="workshow" v-for="item in res_score" :key="item.id">
            <div class="personal-picture">
                <img :src="item.profilePath" alt="">
            </div>
            <div class="judge-detail">
                <div class="judge-message">
                    <div class="judge-name-role">
                        <div class="judge-name">{{ item.nickName }}</div>
                        <PersonalType :role="2"></PersonalType>
                    </div>
                    <h3>评分: {{ item.score }}</h3>
                </div>
                <div class="judge-content-time">
                    <div class="content">
                        {{ item.criticize }}
                    </div>
                    <!-- <div class="time">2022-04-14&nbsp;15:59</div> -->
                    <div class="time">{{ item.updateTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import NoData from '@/components/NoData.vue';
import PersonalType from '@/components/PersonalType.vue'
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';
import { GetWorkScore } from '@/api/front/contest';
const route = useRoute();
const loading = ref(true);
const res_score = ref([]);
const page_num = ref(1);
const page_size = ref(99);
const workId = route.params.id
// 判断NoData是否显示
const loadingFailed = ref(false);
onMounted(() => {
    if (userData) {
        roleId.value = userData.roleId;
        ScoreData();
    } else {
        roleId.value = -1;
    }
});
const userData = JSON.parse(localStorage.getItem('userInfo'));
const roleId = ref();
async function ScoreData() {
    console.log('userId', userData.userId);
    console.log('workId', workId);
    try {
        const response = await GetWorkScore({ id: workId, page_num: page_num.value, page_size: page_size.value });
        res_score.value = response.data.pageList; // 将获取的评论数据赋值给 ref
        console.log('res_score', res_score.value);
        loading.value = false;
    } catch (error) {
        console.error('Failed to get messages:', error);
        loadingFailed.value = true;
    }
}
</script>
<style scoped lang="scss">
.work-show {
    min-height: 155px;
}

.workshow {
    display: flex;
    width: 100%;
    height: 155px;
    // box-shadow: var(--shadow-1);
    padding: 10px 20px;
    border-bottom: 3px solid var(--color-gray-1);

    .personal-picture {
        img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
    }

    .judge-detail {
        width: 100%;
        // background-color: lightcoral;
        margin-left: 2%;

        .judge-message {
            height: 45%;
            // width: 100%;
            display: flex;
            // background-color: lightblue;

            .judge-name-role {
                // background-color: lightgoldenrodyellow;
                width: 15%;

                .judge-name {
                    width: 40%;
                    // background-color: lightcoral;
                    margin: 5% 0 5% 9%;
                }
            }

            h3 {
                margin-left: 75%;
            }
        }

        .judge-content-time {
            font-size: 14px;

            .content {
                margin: 10px 0;
            }

        }
    }
}
</style>